
<!DOCTYPE html>
<html>

<head>
  <!-- Basic -->
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />

  <meta http-equiv="refresh" content="180"  >
  <!-- Mobile Metas -->
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <!-- Site Metas -->
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <meta name="author" content="" />

  <title>Coffeee</title>

  <!-- slider stylesheet -->
  <link rel="stylesheet" type="text/css" href="../static/css/owl.carousel.min.css" />

  <!-- bootstrap core css -->
  <link rel="stylesheet" type="text/css" href="../static/css/bootstrap.css" />

  <!-- fonts style -->
  <link href="https://fonts.googleapis.com/css?family=Lato:400,700|Open+Sans:400,700&display=swap" rel="stylesheet" />

  <!-- Custom styles for this template -->
  <link href="../static/css/style.css" rel="stylesheet" />
  <!-- responsive style -->
  <link href="../static/css/responsive.css" rel="stylesheet" />
    <script src="https://lib.baomitu.com/echarts/5.0.0/echarts.min.js"></script>
</head>

<body style="background-color: #161719">

<div class="col-md-4" style="left: 30%;text-align: center"><h2 style="color: #ffffff">科立锐兴战情看板</h2><a style="color: #fefefe" href="http://10.130.1.252/changer-1117.asp?sn=CQSCA0400244"><button class="btn btn-info">查询</button></a></div>


<div class="row">
<div class="col-md-6" style="background-color: #fffffb;width: 50%; height:200px;margin-left: 5%;">
  <table class="table table-hover" style="text-align: center">
  <tr>

        <td><h6>今日工单</h6></td>
        <td><h6>组装站</h6></td>
        <td><h6>基测站</h6></td>
        <td><h6>烧机站</h6></td>
        <td><h6>功测站</h6></td>
        <td><h6>包装站</h6></td>
    </tr>


    <tr>

        <td>{{ sql_server_results.0 }}&nbsp;&nbsp;</td>
        <td>{{ sql_server_results.1 }}&nbsp;&nbsp;</td>
        <td>{{ sql_server_results.2 }}&nbsp;&nbsp;</td>
        <td>{{ sql_server_results.3 }}&nbsp;</td>
        <td>{{ sql_server_results.4 }}&nbsp;&nbsp;</td>
        <td>{{ sql_server_results.5 }}&nbsp;&nbsp;</td>
    </tr>

      <tr>

        <td><h6> 计划完成量：{{ sql_server_results.6 }}台</h6></td>
        <td><h6> 良率：100% </h6></td>
          <td><h6>完成率：{{ sql_server_results.7 }}  </h6></td>
          <td><h6>  </h6></td>
          <td><h6>  </h6></td>
          <td><h6>  </h6></td>

    </tr>

      <tr>

        <td><h6></h6></td>
        <td><h6>  </h6></td>
          <td><h6> </h6></td>
          <td><h6>  </h6></td>
          <td><h6>  </h6></td>
          <td><h6>  </h6></td>

    </tr>


</table>

</div>


 <!--放置echarts的图-->
    <div class="col-md-2" style="height: 200px;width: 18%;background-color: #fefefe" id="echart01"> </div>
    <div class="col-md-3" style="height: 200px;width: 16%;background-color: #fefefe" id="echart02"> </div>
</div>








  <!-- story section -->
  <section class="layout_padding story_section" id="about">
    <div class="container">
      <div class="row">
        <div class="col-md-6">
          <div class="story-detail">
            <h2>
              测试sqlserver数据库
            </h2>

            <p>
            详情请看项目的说明文件广泛的规范郭德纲个地方个地方咕咚咕咚风格的咕咚咕咚
                富贵花富贵皇华富贵花
            </p>

            <div class="story_btn-container">
              <a href="http://10.130.1.252/changer-1117.asp" class="btn story_btn">Read More</a>
            </div>
          </div>
        </div>
        <div class="col-md-6">
          <div class="justify-content-center justify-content-md-end story_img-box">
            <img src="../static/images/cup.jpg" />
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- end story section -->


</body> <script type="text/javascript" src="../static/js/jquery-3.4.1.min.js"></script>
  <script type="text/javascript" src="../static/js/bootstrap.js"></script>
  <script type="text/javascript" src="../static/js/owl.carousel.min.js">
  </script>
  <script type="text/javascript">
    $(".owl-carousel").owlCarousel({
      loop: true,
      margin: 20,
      nav: true,
      navText: [],
      autoplay: true,
      autoplayHoverPause: true,
      responsive: {
        0: {
          items: 1
        },
        600: {
          items: 2
        },
        1000: {
          items: 3
        }
      }
    });
  </script>

</html>

<script>
    //实例化对象并配置
    var myecharts = echarts.init(document.getElementById('echart01'))
    //设置echarts属性
    var option = {
    title: {
        text: '科立锐兴当日生产',
        subtext: '比例图',
        left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['已完成', '未完成']
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
                {value: {{ sql_server_results.5 }}, name: '已完成'},
                {value: {{ sql_server_results.8 }}, name: '未完成'},

            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(255,255,255,0.5)'
                }
            }
        }
    ]
};
    myecharts.setOption(option)
</script>

<script>
    //实例化对象并配置
    var myecharts = echarts.init(document.getElementById('echart02'))
    //设置echarts属性
    var option = {
    title: {
        text: '各工站生产情况',
        subtext: '比例图',
        left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['组装站', '基测站','烧机站','功测站','包装站']
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
                {value: {{ sql_server_results.1 }}, name: '组装站'},
                {value: {{ sql_server_results.2 }}, name: '基测站'},
                {value: {{ sql_server_results.3 }}, name: '烧机站'},
                {value: {{ sql_server_results.4 }}, name: '功测站'},
                {value: {{ sql_server_results.5 }}, name: '包装站'},

            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(255,255,251,0.5)'
                }
            }
        }
    ]
};
    myecharts.setOption(option)
</script>